<template>
    <transition name="slide-down">
        <div class="title-wrapper" v-show="menuVisible">
            <div class="left">
                <div class="icon-wrapper">
                    <span class="icon-back" @click="back"></span>
                </div>
            </div>
            <div class="right">
                <div class="icon-wrapper">
                    <span class="icon-shelf"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-cart"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-more"></span>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import { ebookMixin } from '../../utils/mixin' 
export default {
    mixins: [ebookMixin],
    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        back() { 
            console.log('back')
        }
    },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
    .title-wrapper { 
        position: absolute; //这里使用绝对定位，是为了脱离文档流
        top: 0;
        left: 0;
        z-index: 101;
        display: flex;
        width: 100%;
        height: px2rem(48);
        background: white;
        box-shadow: 0 px2rem(8) px2rem(8) rgba(0,0,0,.15);//水平阴影距离,垂直阴影距离,模糊距离,颜色
        font-size: px2rem(20);
        .left { 
            /*第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
              第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
              第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小*/
            flex: 0 0 px2rem(60); //拉伸0 收缩0 宽度60
            @include left;
            margin-left: px2rem(15);
        }
        .right {
            flex: 1;//自适应，因为left中是直接要求了60,所以这里flex不管是1、2、3，还是多少，都是分配剩余的所有空间
            display: flex;
            justify-content: flex-end;
            .icon-wrapper { 
                flex: 0 0 px2rem(40);
                @include center;
                .icon-shelf { 
                    font-size: px2rem(22);
                }
                .icon-cart { 
                    font-size: px2rem(22);
                }
            }
        }
    }
</style>